<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_ico" @click="jumpBack()" >
                    <div class="title_left_ico" >
                        <a-icon type="left" class="Group_ico" theme="outlined" />
                    </div>
                    <div class="title_left_text" >返回</div>
                </div>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>报警信息</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" theme="outlined" :class="[rotate?'go':'aa']"  @click="refresh" />
                </div>
            </TitleMenu>
        </div>

        <div  class="warnInfo_content" v-loading="loading">
            <div class="warnInfo_content_div" v-for="category in floodsWarning">
                <div class="warnInfo_category_title">
                    {{category.workMode}}
                </div>
                <div class="warnInfo_category_info" v-for="categoryDetail in category.data">
                    <div class="warnInfo_category_info_time" ><!--v-html="categoryDetail.time"-->
                        {{new Date(Date.parse(categoryDetail.time)) | formatDate}}
                    </div>
                    <div class="warnInfo_category_info_detail">
                        {{categoryDetail.type}} {{categoryDetail.content}}
                    </div>
                </div>
            </div>
        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>
.warnInfo_content{
    background: rgb(237,237,237);
    padding: 2vw 0 0 0 ;
    width: 100vw;
    height: calc(100vh - 66vw);
    overflow: auto;
    generic-family:Microsoft Yahei;

}
.title_left_ico{
    float: left;
    margin: 0;
    padding: 0;
    width: 6vw;
    height:13.75vw ;
    line-height: 16vw;
}
.title_left_text{
        width: 12vw;
        height:13.75vw ;
        float: left;
        margin: 0;
        padding: 0;
        line-height: 13.75vw;
        font-size: 5vw;
    }
.warnInfo_content_div{
    width: 100vw;

}
.warnInfo_category_title{
    width: 100vw;
    font-size: 6vw;
    color: black;
    text-align: left;
    height: 12vw;
    line-height: 12vw;
    float: left;
    background: white;
    padding: 0 2vw 0 2vw;
    margin: 0 0 0.4vw 0;
}
    .warnInfo_category_info{
        width: 100vw;
        float: left;
        min-height: 12vw;
        margin: 0 0 0.5vw 0 ;
        background: white;
        padding: 0 2vw 0 2vw;
    }

    .warnInfo_category_info_time{
        width: 30%;
        font-size: 5vw;
        color: black;
        text-align: left;
        line-height: 6vw;
        float: left;
        word-break: break-all;
    }

    .warnInfo_category_info_detail{
        width: 70%;
        font-size: 5.5vw;
        color: red;
        text-align: left;
        line-height: 2.3;
        padding-left: 2vw;
        float: left;
    }

</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import FooterChaanel from "../components/FooterChaanel";
    import {mapState} from 'vuex'; //先要引入

    export default {
        name: "FloodPatrol",
        components:{FooterChaanel, ACol, ARow, TitleTop,TitleMenu},
        inject:['reload'],
        mounted(){
            this.clearCountWarningNumber();
        },
        data() {
            return {
              /*  floodsWarning:this.$store.state.floodsWarning,*/
                rotate:false,
                loading:false,
            }
        },
        computed: {
            ...mapState(['floodsMessage']),
            ...mapState({
                floodsWarning: state => state.floodsWarning
            }),
        },

        methods:{
            refresh(){
                this.clickButton();
                this.rotate=!this.rotate;
                this.loading = true;
                setTimeout(function() {
                    this.reload();
                },1000)
            },
            clearCountWarningNumber(){
                    let reset = '';
                    this.$store.commit("countWarningNumber",reset);
            },
            jumpBack(){
                this.clickButton();
                this.$router.push('/homeWork');
            }
        },

    }
</script>

